<template>
  <div class="emoji-picker">
    <div class="emoji-picker__header">
      <div class="emoji-picker__tabs">
        <button
          v-for="category in categories"
          :key="category.name"
          :class="['emoji-picker__tab', { active: activeCategory === category.name }]"
          @click="activeCategory = category.name"
          :title="category.label"
        >
          {{ category.icon }}
        </button>
      </div>
      <div class="emoji-picker__search">
        <input
          v-model="searchQuery"
          type="text"
          placeholder="搜索表情..."
          class="emoji-picker__search-input"
        />
      </div>
    </div>
    
    <div class="emoji-picker__content">
      <div class="emoji-picker__grid">
        <button
          v-for="emoji in filteredEmojis"
          :key="emoji.code"
          :class="['emoji-picker__item']"
          @click="selectEmoji(emoji)"
          :title="emoji.name"
        >
          {{ emoji.char }}
        </button>
      </div>
    </div>
    
    <div class="emoji-picker__footer">
      <div class="emoji-picker__recent" v-if="recentEmojis.length > 0">
        <div class="emoji-picker__recent-title">最近使用</div>
        <div class="emoji-picker__recent-list">
          <button
            v-for="emoji in recentEmojis"
            :key="emoji.code"
            :class="['emoji-picker__item']"
            @click="selectEmoji(emoji)"
            :title="emoji.name"
          >
            {{ emoji.char }}
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';

interface Emoji {
  code: string;
  char: string;
  name: string;
  category: string;
}

interface EmojiCategory {
  name: string;
  label: string;
  icon: string;
}

const emit = defineEmits<{
  (e: 'select', emoji: Emoji): void;
}>();

const activeCategory = ref('smileys');
const searchQuery = ref('');
const recentEmojis = ref<Emoji[]>([]);

// 表情分类
const categories: EmojiCategory[] = [
  { name: 'smileys', label: '笑脸和人物', icon: '😀' },
  { name: 'animals', label: '动物和自然', icon: '🐶' },
  { name: 'food', label: '食物和饮料', icon: '🍎' },
  { name: 'activities', label: '活动', icon: '⚽' },
  { name: 'travel', label: '旅行和地点', icon: '🚗' },
  { name: 'objects', label: '物品', icon: '💡' },
  { name: 'symbols', label: '符号', icon: '❤️' },
  { name: 'flags', label: '旗帜', icon: '🏁' }
];

// 表情数据
const emojis = ref<Emoji[]>([
  // 笑脸和人物
  { code: ':smile:', char: '😀', name: '笑脸', category: 'smileys' },
  { code: ':grinning:', char: '😃', name: '露齿笑', category: 'smileys' },
  { code: ':joy:', char: '😂', name: '笑哭', category: 'smileys' },
  { code: ':heart_eyes:', char: '😍', name: '心形眼', category: 'smileys' },
  { code: ':wink:', char: '😉', name: '眨眼', category: 'smileys' },
  { code: ':thinking:', char: '🤔', name: '思考', category: 'smileys' },
  { code: ':thumbsup:', char: '👍', name: '点赞', category: 'smileys' },
  { code: ':thumbsdown:', char: '👎', name: '点踩', category: 'smileys' },
  { code: ':clap:', char: '👏', name: '鼓掌', category: 'smileys' },
  { code: ':wave:', char: '👋', name: '挥手', category: 'smileys' },
  
  // 动物和自然
  { code: ':dog:', char: '🐶', name: '狗', category: 'animals' },
  { code: ':cat:', char: '🐱', name: '猫', category: 'animals' },
  { code: ':mouse:', char: '🐭', name: '老鼠', category: 'animals' },
  { code: ':rabbit:', char: '🐰', name: '兔子', category: 'animals' },
  { code: ':fox:', char: '🦊', name: '狐狸', category: 'animals' },
  { code: ':bear:', char: '🐻', name: '熊', category: 'animals' },
  { code: ':panda:', char: '🐼', name: '熊猫', category: 'animals' },
  { code: ':tree:', char: '🌲', name: '树', category: 'animals' },
  { code: ':flower:', char: '🌸', name: '花', category: 'animals' },
  { code: ':sun:', char: '☀️', name: '太阳', category: 'animals' },
  
  // 食物和饮料
  { code: ':apple:', char: '🍎', name: '苹果', category: 'food' },
  { code: ':banana:', char: '🍌', name: '香蕉', category: 'food' },
  { code: ':pizza:', char: '🍕', name: '披萨', category: 'food' },
  { code: ':hamburger:', char: '🍔', name: '汉堡', category: 'food' },
  { code: ':coffee:', char: '☕', name: '咖啡', category: 'food' },
  { code: ':beer:', char: '🍺', name: '啤酒', category: 'food' },
  { code: ':cake:', char: '🎂', name: '蛋糕', category: 'food' },
  { code: ':ice_cream:', char: '🍦', name: '冰淇淋', category: 'food' },
  
  // 活动
  { code: ':soccer:', char: '⚽', name: '足球', category: 'activities' },
  { code: ':basketball:', char: '🏀', name: '篮球', category: 'activities' },
  { code: ':tennis:', char: '🎾', name: '网球', category: 'activities' },
  { code: ':guitar:', char: '🎸', name: '吉他', category: 'activities' },
  { code: ':game:', char: '🎮', name: '游戏', category: 'activities' },
  
  // 旅行和地点
  { code: ':car:', char: '🚗', name: '汽车', category: 'travel' },
  { code: ':airplane:', char: '✈️', name: '飞机', category: 'travel' },
  { code: ':house:', char: '🏠', name: '房子', category: 'travel' },
  { code: ':office:', char: '🏢', name: '办公楼', category: 'travel' },
  
  // 物品
  { code: ':bulb:', char: '💡', name: '灯泡', category: 'objects' },
  { code: ':book:', char: '📚', name: '书', category: 'objects' },
  { code: ':computer:', char: '💻', name: '电脑', category: 'objects' },
  { code: ':phone:', char: '📱', name: '手机', category: 'objects' },
  
  // 符号
  { code: ':heart:', char: '❤️', name: '红心', category: 'symbols' },
  { code: ':star:', char: '⭐', name: '星星', category: 'symbols' },
  { code: ':fire:', char: '🔥', name: '火', category: 'symbols' },
  { code: ':check:', char: '✅', name: '对勾', category: 'symbols' },
  { code: ':x:', char: '❌', name: '叉号', category: 'symbols' },
  
  // 旗帜
  { code: ':flag_cn:', char: '🇨🇳', name: '中国国旗', category: 'flags' },
  { code: ':flag_us:', char: '🇺🇸', name: '美国国旗', category: 'flags' },
  { code: ':checkered_flag:', char: '🏁', name: '方格旗', category: 'flags' }
]);

// 过滤表情
const filteredEmojis = computed(() => {
  let filtered = emojis.value;
  
  // 按分类过滤
  if (activeCategory.value !== 'all') {
    filtered = filtered.filter(emoji => emoji.category === activeCategory.value);
  }
  
  // 按搜索关键词过滤
  if (searchQuery.value.trim()) {
    const query = searchQuery.value.toLowerCase();
    filtered = filtered.filter(emoji => 
      emoji.name.toLowerCase().includes(query) ||
      emoji.code.toLowerCase().includes(query)
    );
  }
  
  return filtered;
});

// 选择表情
const selectEmoji = (emoji: Emoji) => {
  // 添加到最近使用
  const existingIndex = recentEmojis.value.findIndex(e => e.code === emoji.code);
  if (existingIndex > -1) {
    recentEmojis.value.splice(existingIndex, 1);
  }
  recentEmojis.value.unshift(emoji);
  
  // 限制最近使用的数量
  if (recentEmojis.value.length > 20) {
    recentEmojis.value = recentEmojis.value.slice(0, 20);
  }
  
  // 保存到本地存储
  localStorage.setItem('emoji-recent', JSON.stringify(recentEmojis.value));
  
  emit('select', emoji);
};

// 加载最近使用的表情
onMounted(() => {
  const saved = localStorage.getItem('emoji-recent');
  if (saved) {
    try {
      recentEmojis.value = JSON.parse(saved);
    } catch (e) {
      console.warn('Failed to load recent emojis:', e);
    }
  }
});
</script>

<style lang="scss" scoped>
.emoji-picker {
  width: 320px;
  height: 400px;
  border: 1px solid var(--border-color, #e0e0e0);
  border-radius: 8px;
  background: var(--bg-color, #ffffff);
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  
  &__header {
    border-bottom: 1px solid var(--border-color, #e0e0e0);
    padding: 8px;
  }
  
  &__tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
  }
  
  &__tab {
    padding: 6px 8px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.2s;
    
    &:hover {
      background: var(--bg-secondary, #f5f5f5);
    }
    
    &.active {
      background: var(--primary-color, #1890ff);
      color: white;
    }
  }
  
  &__search {
    position: relative;
  }
  
  &__search-input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 4px;
    font-size: 12px;
    outline: none;
    
    &:focus {
      border-color: var(--primary-color, #1890ff);
    }
  }
  
  &__content {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
  }
  
  &__grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
  }
  
  &__item {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
    
    &:hover {
      background: var(--bg-secondary, #f5f5f5);
    }
  }
  
  &__footer {
    border-top: 1px solid var(--border-color, #e0e0e0);
    padding: 8px;
    max-height: 80px;
    overflow-y: auto;
  }
  
  &__recent-title {
    font-size: 12px;
    color: var(--text-secondary, #666);
    margin-bottom: 4px;
  }
  
  &__recent-list {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    
    .emoji-picker__item {
      width: 24px;
      height: 24px;
      font-size: 14px;
    }
  }
}

/* 暗色主题 */
[data-theme="dark"] .emoji-picker {
  &__tab:hover {
    background: var(--bg-secondary, #2c2c2c);
  }
  
  &__item:hover {
    background: var(--bg-secondary, #2c2c2c);
  }
}
</style>